<template>
  <div class="con">
    <!-- 放置内容区 -->
    <div class="contbox6_10" v-if="true">
      <p class="titlelist6_10">
        商城管理
        <span style="color: #999">&nbsp;&nbsp;/&nbsp;&nbsp;</span>商品分润
      </p>
      <div class="content">
        <div class="sousuojg6_10">
          <el-form ref="listQuery" :model="listQuery" label-width="80px">
            <el-form-item label="商品分类">
              <el-input
                placeholder="请输入商品分类"
                v-model="listQuery.firstTypeName"
              ></el-input>
            </el-form-item>
            <el-form-item label="状态">
              <el-select
                v-model="listQuery.status"
                placeholder="请选择"
                class="filter-item"
              >
                <el-option
                  v-for="item in orgType"
                  :key="item.id"
                  :label="item.label"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="创建时间">
              <el-date-picker
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="开始日期"
                v-model="listQuery.startDate"
              ></el-date-picker>
              <div class="times">-</div>
              <el-date-picker
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="结束日期"
                v-model="listQuery.endDate"
              ></el-date-picker>
            </el-form-item>
          </el-form>
        </div>
        <!-- 品牌列表 -->
        <div class="buttons">
          <el-button
            v-if="isAuth('commoTypeSearch')"
            type="primary"
            @click="handleSelectLists"
            >搜索</el-button
          >
          <el-button
            v-if="isAuth('commoYypeReset')"
            @click="resetTheSearch"
            type=""
            icon="edit"
            >重置</el-button
          >
          <el-button
            type="primary"
            class="butt"
            style="margin-left: 40px; width: 120px"
            v-if="isAuth('createProductType')"
            @click="createWindow()"
            icon="el-icon-plus"
            >创建商品类型</el-button
          >
        </div>
        <el-table
          :data="list"
          :header-cell-style="{ background: '#F9FAFC', color: '#222' }"
          stripe
          border
          :row-style="{ height: '0px' }"
          :cell-style="{ padding: '0px' }"
          ref="multipleTable"
          style="margin-top: 24px !important"
        >
          <el-table-column show-overflow-tooltip :span="5" label="商品分类">
            <template slot-scope="scope">
              <span>{{ scope.row.firstTypeName }}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column :span="5"  label="机构名称">
            <template slot-scope="scope">
              <span>
                {{ scope.row.officeName }}
              </span>
            </template>
          </el-table-column> -->
          <el-table-column min-width="100" label="状态">
            <template slot-scope="scope">
              <span v-if="scope.row.status == 0">启用</span>
              <span v-if="scope.row.status == 1">停用</span>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip :span="6" label="创建时间">
            <template slot-scope="scope">
              <span>{{ scope.row.createDate }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="260">
            <template slot-scope="scope" class="scope">
              <el-button
                v-if="isAuth('commoTypeDetail')"
                type="text"
                class="typeScree"
                @click="handPingpai(scope)"
                >查看</el-button
              >
              <el-button
                v-if="isAuth('commoTypeUpdate')"
                type="text"
                @click="createWindow(scope.row, 2)"
                >修改</el-button
              >
              <el-button
                type="text"
                style="color: #f56c6c"
                v-if="scope.row.status == 0 && isAuth('commoTypeDelete')"
                @click="handleQuery(scope.row, 1)"
                >停用</el-button
              >
              <el-button
                type="text"
                v-if="scope.row.status == 1 && isAuth('commoTypeDelete')"
                @click="handleQuery(scope.row, 0)"
                >启用</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 查看-->
        <el-dialog title="商 品 类 型" :visible.sync="dialogFormVisible">
          <el-form :model="form">
            <el-row>
              <el-Col>
                <el-form-item
                  style="margin-bottom: 20px; width: 400px"
                  label="商品分类"
                  prop="secondTypeName"
                >
                  <el-input
                    style="width: 300px"
                    class="list"
                    :disabled="true"
                    v-model="form.firstTypeName"
                    placeholder="请输入品牌名称"
                  ></el-input>
                </el-form-item>
              </el-Col>
            </el-row>
            <el-row>
              <el-Col>
                <el-form-item style="margin-bottom: 20px" label="商品类型">
                  <div style="width: 100%">
                    <el-button
                      v-for="(item, i) in form.secondTypeNameList"
                      :key="i"
                      class="butts"
                      >{{ item.channelTypeName }}</el-button
                    >
                  </div>
                </el-form-item>
              </el-Col>
            </el-row>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogFormVisible = false"
              >确 定</el-button
            >
          </div>
        </el-dialog>
        <div style="font-size: 16px; margin-top: 30px">
          <div v-show="!listLoading" class="pagination-container">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="listQuery.page"
              :page-sizes="[20, 50, 100]"
              :page-size="listQuery.number"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            ></el-pagination>
          </div>
        </div>
      </div>
    </div>
    <!-- 创建/修改品牌类型 -->
    <el-dialog
      :close-on-click-modal="false"
      :title="templateTilete"
      :visible.sync="dialogFormBrandList"
    >
      <el-form :model="form" ref="form" label-width="120px">
        <el-row>
          <el-Col>
            <el-form-item
              style="margin-bottom: 20px"
              :rules="{
                required: true,
                message: '商品分类不能为空',
                trigger: 'blur',
              }"
              label="商品分类"
              prop="firstTypeName"
            >
              <el-input
                :maxlength="commodityTyepLength"
                @input="$forceUpdate()"
                v-model="form.firstTypeName"
                placeholder="请输入商品分类"
              ></el-input>
            </el-form-item>
          </el-Col>
        </el-row>
        <el-row>
          <el-Col v-for="(itms, i) in form.secondTypeNameList" :key="i">
            <el-form-item
              style="margin-bottom: 20px"
              label="商品类型"
              :prop="'secondTypeNameList.' + i + '.channelTypeName'"
              :rules="{
                required: true,
                message: '商品类型不能为空',
                trigger: 'blur',
              }"
            >
              <div style="display: flex">
                <el-input
                  :maxlength="commodityTyepLength"
                  v-model="form.secondTypeNameList[i].channelTypeName"
                  placeholder="请输入商品类型"
                ></el-input>
                <div style="display: flex">
                  <div
                    v-if="i == 0"
                    style="margin-left: 10px; color: #409eff"
                    type="primary"
                    @click="
                      form.secondTypeNameList.push({ channelTypeName: '' })
                    "
                  >
                    增加类型
                  </div>
                  <div
                    style="margin-left: 10px"
                    v-if="i != 0 && i == form.secondTypeNameList.length - 1"
                    @click="channelTypeStatus(itms, i)"
                  >
                    <img src="../../assets/images/del.png" />
                  </div>
                </div>
              </div>
            </el-form-item>
          </el-Col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormBrandList = false">取 消</el-button>
        <el-button type="primary" if="!sign" @click="create('form')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import axios from "axios";
import https from "../../plugins/https";
import { CompareDate } from "../../assets/js/commion";
import { commodityTyepLength } from "../../plugins/rules.js";
export default {
  name: "brandManage",
  data() {
    return {
      commodityTyepLength: commodityTyepLength,
      lest: [],
      pinpai: null,
      dataes: null,
      list: [],
      total: null,
      showType: false,
      listLoading: true,
      checkedAll: false,
      dialogTableVisible: false,
      dialogFormVisible: false,
      firstTypeName: "",
      listQuery: {
        oemUid:
          localStorage.getItem("jurisdiction") != 2
            ? localStorage.getItem("uid")
            : undefined, //OEMid
        secondTypeName: "", //	品牌名称
        channelCode: "", //	品牌编号
        officeType: "", //	机构类型
        firstTypeName: "", //	机构名称
        phone: "", //	手机号
        status: "", //	状态
        startDate: "", //	开始时间
        endDate: "", //	结束时间
        page: 1, //第几页
        number: 20, //每页几条
        officeUid: "",
      },
      // urltype: this.GLOBAL.httpurl,//请求地址
      selectTime: [],
      sign: localStorage.getItem("jurisdiction") == 2, //最高权限看到的true
      templateTilete: "创建商品类型",
      dialogFormBrandList: false, //创建品牌页面
      multipleSelection: [], //选中的数组
      form: {
        oemUid:
          localStorage.getItem("jurisdiction") != 2
            ? localStorage.getItem("uid")
            : undefined, //OEMid
        uid: undefined, //	品牌id	String	N	修改必传
        firstTypeName: undefined, //	品牌名称	String	Y
        channelCode: undefined, //品牌编号	String	Y	唯一值
        secondTypeNameList: [{ channelTypeName: "" }], //	品牌类型列表	List	Y
        channelTypeName: undefined, //	品牌名称	String	Y
        operaType: undefined, //	操作类型	String	Y	1.新增、2修改、3删除
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "120px",
      organizationLsit: [
        { id: "", label: "全部" },
        { id: "0", label: "OEM代理" },
        { id: "1", label: "普通代理" },
      ],
      orgType: [
        { id: "", label: "全部" },
        { id: "0", label: "启用" },
        { id: "1", label: "停用" },
      ],
      rules: {},
    };
  },
  mounted: function () {
    window.scrollTo(0, 0);
    let _this = this;
  },
  created() {
    let that = this;
    that.handleSelectList();
  },

  methods: {
    //这里开始
    transmit(data) {
      console.log(data.uid);
      //归属机构的uid
      // listQuery.officeUid
      this.listQuery.officeUid = data.uid;
      // console.log(this.form.officeUid);
      //归属机构名字
      this.firstTypeName = data.name;
    },
    //设置取消的
    determine() {
      // alert("执行")
      this.showType = false;
    },

    selectInstitution() {
      this.showType = true;
    },
    // 查看
    handPingpai(val) {
      var uid = val.row.id;
      let that = this;
      https
        .catShopType({ id: uid })
        .then((res) => {
          if (res.data.code == "0000") {
            that.form.uid = val.uid;
            that.form = Object.assign(that.form, res.data.data);
            for (let i = 0; i > this.form.secondTypeNameList.length; i++) {
              this.form.secondTypeNameList[i].operaType = 2;
            }
            that.form.operaType = 2;
            this.dialogFormVisible = true;
          } else {
            that.listLoading = false;
            layer.open({
              content: "错误",
              skin: "msg",
              time: 2, //1秒后自动关闭
            });
          }
        })
        .catch((res) => {});
    },
    /**
     * @author: Zhu Liangfu
     * @Description:刪除类型
     * @date:2020/7/18   22:23
     */
    channelTypeStatus(items, val) {
      this.form.secondTypeNameList.splice(val, 1);
      console.log(this.form.secondTypeNameList);
    },
    /**
     * @Author： Zhu Liang Fu
     * @Date： 2020/6/10 16:41
     * @annotation： 界面集合获取数据
     **/
    handleSelectList() {
      let that = this;
      that.listLoading = true;
      https
        .shopTypeList(that.listQuery)
        .then((res) => {
          if (res.data.code == "0000") {
            that.list = res.data.data;
            that.total = res.data.total;
            that.listLoading = false;
          } else {
            that.listLoading = false;
            layer.open({
              content: res.data.msg,
              skin: "msg",
              time: 2, //1秒后自动关闭
            });
          }
        })
        .catch((res) => {});
    },
    /**
     * @Author： Zhu Liang Fu
     * @Date： 2020/6/10 17:57
     * @annotation： 分页
     **/
    handleSizeChange(val) {
      let that = this;
      this.listQuery.page = 1;
      that.listQuery.number = val;
      console.log(val);
      // this.listQuery.page = val
      // alert(listQuery.number)
      that.handleSelectList();
    },

    /**
     * @Author： Zhu Liang Fu
     * @Date： 2020/6/10 17:57
     * @annotation： 分页
     **/
    handleCurrentChange(val) {
      let that = this;
      that.listQuery.page = val;
      that.handleSelectList();
    },
    handleSelectLists() {
      if (this.listQuery.startDate != "" && this.listQuery.endDate != "") {
        if (CompareDate(this.listQuery.startDate, this.listQuery.endDate)) {
          this.listQuery.page = 1;
          this.handleSelectList();
        } else {
          layer.open({
            content: "结束时间不能早于开始时间",
            skin: "msg",
            time: 1, //1秒后自动关闭
          });
        }
      } else {
        this.listQuery.page = 1;
        this.handleSelectList();
      }
    },
    /**
     * @author: Zhu Liangfu
     * @Description:新建修改弹框
     * @date:2020/6/10   20:50
     */
    createWindow(val, status) {
      let that = this;
      if (that.$refs["form"] !== undefined) {
        that.$refs["form"].resetFields();
      }
      that.resetTheData();
      if (status == 2) {
        that.templateTilete = "修改商品类型";
        https
          .setShopList({ id: val.id })
          .then((res) => {
            if (res.data.code == "0000") {
              that.form.uid = val.uid;
              that.form = Object.assign(that.form, res.data.data);
              for (let i = 0; i > this.form.secondTypeNameList.length; i++) {
                this.form.secondTypeNameList[i].operaType = 2;
              }
              that.form.operaType = 2;
              that.dialogFormBrandList = true;
            } else {
              that.listLoading = false;
              layer.open({
                content: res.data.msg,
                skin: "msg",
                time: 2, //1秒后自动关闭
              });
            }
          })
          .catch((res) => {});
      } else {
        that.templateTilete = "创建商品类型";
        that.form.operaType = 1;
        that.dialogFormBrandList = true;
      }
    },

    /**
     * @author: Zhu Liangfu
     * @Description: 创建品牌或修改完成
     * @date:2020/6/10   20:10
     */
    create() {
      let that = this;
      that.$refs["form"].validate((valid) => {
        if (valid) {
          that
            .axios({
              method: "POST",
              url: "api/brand/saveProductType",
              data: that.form,
            })
            .then((res) => {
              if (res.data.code == "0000") {
                layer.open({
                  content: "保存成功",
                  skin: "msg",
                  time: 2, //1秒后自动关闭
                });
                that.handleSelectList();
                that.dialogFormBrandList = false;
              } else {
                layer.open({
                  content: res.data.msg,
                  skin: "msg",
                  time: 2, //1秒后自动关闭
                });
                this.dialogFormBrandList = false;
                this.handleSelectList();
              }
            })
            .catch((res) => {});
        }
      });
    },
    /**
     * @author: Zhu Liangfu
     * @Description: 停用启用状态修改
     * @date:2020/6/14   15:29
     */

    handleQuery(row, status) {
      let that = this;
      if (status == 1) {
        https
          .stopShopTypeList({ uid: row.id })
          .then((res) => {
            if (res.data.code == "0000") {
              that.handleSelectList();
            } else {
              layer.open({
                content: "停用失败:" + res.data.msg,
                skin: "msg",
                time: 2, //1秒后自动关闭
              });
            }
          })
          .catch(() => {
            that.$message({
              type: "info",
              message: "已取消停用",
            });
          });
      } else {
        that
          .axios({
            method: "POST",
            url: "api/brand/changeProductTypeStatus",
            data: { uid: row.id },
          })
          .then((res) => {
            if (res.data.code == "0000") {
              that.handleSelectList();
            } else {
              layer.open({
                content: "启用失败:" + res.data.msg,
                skin: "msg",
                time: 2, //1秒后自动关闭
              });
            }
          })
          .catch((res) => {});
      }
    },
    /**
     * @Author： Zhu Liang Fu
     * @Date： 2020/6/10 17:50
     * @annotation： 重置查询条件修改弹框
     **/
    resetTheData() {
      let that = this;
      that.form = {
        oemUid:
          localStorage.getItem("jurisdiction") != 2
            ? localStorage.getItem("uid")
            : undefined, //OEMid
        uid: undefined, //	品牌id	String	N	修改必传
        secondTypeName: undefined, //	品牌名称	String	Y
        channelCode: undefined, //品牌编号	String	Y	唯一值
        secondTypeNameList: [{ channelTypeName: "" }], //	品牌类型列表	List	Y
        channelTypeName: undefined, //	品牌名称	String	Y
        operaType: undefined, //	操作类型	String	Y	1.新增、2修改、3删除
      };
    },
    /**
     * @Author： Zhu Liang Fu
     * @Date： 2020/6/10 17:50
     * @annotation： 重置搜索查询条件
     **/
    resetTheSearch() {
      let that = this;
      this.firstTypeName = "";
      that.listQuery = {
        oemUid:
          localStorage.getItem("jurisdiction") != 2
            ? localStorage.getItem("uid")
            : undefined, //OEMid
        secondTypeName: "", //	品牌名称
        channelCode: "", //	品牌编号
        officeType: "", //	机构类型
        firstTypeName: "", //	机构名称
        phone: "", //	手机号
        status: "", //	状态
        startDate: "", //	开始时间
        endDate: "", //	结束时间
        page: 1, //第几页
        number: 20, //每页几条
        officeUid: "",
      };
      that.selectTime = [];
      this.handleSelectList();
    },
  },
};
</script>

<style scoped>
/* 单独样式 */

.contbox6_10 {
  width: 100%;
  overflow-x: auto;
  box-sizing: border-box;
  float: left;
}
.con {
  position: relative;
}
.el-message-box {
  display: inline-block;
  width: 35%;
  height: 145px;
  font-size: 20px;
  margin-left: 20px;
  margin-top: 20px;
  padding-bottom: 10px;
  vertical-align: middle;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #ebeef5;
  font-size: 18px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  text-align: center;
  overflow: hidden;
  backface-visibility: hidden;
}
.el-input--suffix .el-input__inner {
  padding-right: 0;
}
.el-button--small,
.el-button--small.is-round {
  padding: 10px 11px;
}
.el-input-shop {
  position: relative;
  font-size: 14px;
  left: -210px;
  width: 35%;
}
.el-form-item {
  float: left;
}
.time {
  width: 136px !important;
}
.time > .el-input__inner {
  width: 100% !important;
}
.times {
  display: inline-block;
  text-align: center;
  width: 20px;
}
.el-date-editor {
  width: 135px !important;
}
.el-dialog {
  width: 700px;
}
.butts {
  color: #409eff;
  display: block;
  margin-left: 68px;
  margin-top: 10px;
  margin-right: 10px !important;
  height: 30px;
  line-height: 7px;
  border-radius: 4px;
  border: 1px solid #d9ecff;
  background: #ecf5ff;
}
.butts:first-of-type {
  margin-top: 0px;
  margin-left: 0px;
}
/deep/ .el-dialog {
  width: 500px !important;
}
.buttons > .el-button {
  width: 100px;
  padding: 7px;
  height: 32px;
}
.list >>> .el-input__inner {
  width: 300px;
}
</style>
